<template>
  <div class="relation-graph-demo">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>Relation-graph 关系图 Demo</span>
          <div class="header-actions">
            <el-select
              v-model="currentLayout"
              @change="changeLayout"
              style="width: 120px; margin-right: 10px"
            >
              <el-option label="中心布局" value="center" />
              <el-option label="树状布局" value="tree" />
              <el-option label="力导向" value="force" />
            </el-select>
            <el-button type="primary" @click="refreshGraph">刷新图表</el-button>
          </div>
        </div>
      </template>

      <div class="graph-container">
        <relation-graph
          ref="relationGraphRef"
          :options="graphOptions"
          :on-node-click="onNodeClick"
          :on-line-click="onLineClick"
          :on-node-expand="onNodeExpand"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

defineOptions({
  name: "RelationGraphDemo",
});

const relationGraphRef = ref();
const currentLayout = ref("center");

// 图表配置
const graphOptions = ref({
  layouts: [
    {
      label: "中心",
      layoutName: "center",
      layoutClassName: "seeks-layout-center",
    },
    {
      label: "树状",
      layoutName: "tree",
      layoutClassName: "seeks-layout-tree",
    },
    {
      label: "力导向",
      layoutName: "force",
      layoutClassName: "seeks-layout-force",
    },
  ],
  defaultNodeType: "rect",
  defaultNodeWidth: 80,
  defaultNodeHeight: 40,
  defaultLineColor: "#409eff",
  defaultNodeColor: "#fff",
  defaultNodeFontColor: "#333",
  defaultNodeBorderColor: "#409eff",
  defaultNodeFontSize: 14,
});

// 示例数据 - 公司组织架构
const graphData = {
  rootId: "ceo",
  nodes: [
    { id: "ceo", text: "CEO", type: "rect", color: "#ff6b6b" },
    { id: "cto", text: "CTO", type: "rect", color: "#4ecdc4" },
    { id: "cfo", text: "CFO", type: "rect", color: "#45b7d1" },
    { id: "coo", text: "COO", type: "rect", color: "#a8e6cf" },
    { id: "dev1", text: "前端组", type: "rect", color: "#96ceb4" },
    { id: "dev2", text: "后端组", type: "rect", color: "#feca57" },
    { id: "dev3", text: "测试组", type: "rect", color: "#ff9ff3" },
    { id: "dev4", text: "运维组", type: "rect", color: "#dda0dd" },
    { id: "finance", text: "财务部", type: "rect", color: "#98d8c8" },
    { id: "hr", text: "人事部", type: "rect", color: "#f7dc6f" },
    { id: "sales", text: "销售部", type: "rect", color: "#bb8fce" },
    { id: "marketing", text: "市场部", type: "rect", color: "#85c1e9" },
    { id: "product", text: "产品部", type: "rect", color: "#f8c471" },
    { id: "design", text: "设计部", type: "rect", color: "#82e0aa" },
  ],
  lines: [
    { from: "ceo", to: "cto", text: "管理" },
    { from: "ceo", to: "cfo", text: "管理" },
    { from: "ceo", to: "coo", text: "管理" },
    { from: "cto", to: "dev1", text: "负责" },
    { from: "cto", to: "dev2", text: "负责" },
    { from: "cto", to: "dev3", text: "负责" },
    { from: "cto", to: "dev4", text: "负责" },
    { from: "cfo", to: "finance", text: "负责" },
    { from: "cfo", to: "hr", text: "负责" },
    { from: "coo", to: "sales", text: "负责" },
    { from: "coo", to: "marketing", text: "负责" },
    { from: "coo", to: "product", text: "负责" },
    { from: "product", to: "design", text: "协作" },
  ],
};

// 节点点击事件
const onNodeClick = (node: any) => {
  console.log("点击节点:", node);
};

// 连线点击事件
const onLineClick = (line: any) => {
  console.log("点击连线:", line);
};

// 节点展开事件
const onNodeExpand = (node: any) => {
  console.log("展开节点:", node);
};

// 刷新图表
const refreshGraph = () => {
  if (relationGraphRef.value) {
    relationGraphRef.value.setJsonData(graphData);
  }
};

// 切换布局
const changeLayout = (layoutName: string) => {
  if (relationGraphRef.value) {
    relationGraphRef.value.changeLayout(layoutName);
  }
};

onMounted(() => {
  // 初始化图表数据
  setTimeout(() => {
    if (relationGraphRef.value) {
      relationGraphRef.value.setJsonData(graphData);
    }
  }, 100);
});
</script>

<style scoped>
.relation-graph-demo {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
}

.graph-container {
  height: 600px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}
</style>
